<template>
	<view class="login-container">
		<form @submit="formSubmit" @reset="formReset" class="login-form">
			<view class="uni-form-item uni-column">
				<view class="title">用户名</view>
				<input class="uni-input" name="phoneEmail" v-model="loginForm.phoneEmail" placeholder="请输入用户名" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">密码</view>
				<input class="uni-input" name="password" v-model="loginForm.password" placeholder="请输入密码" />
			</view>
			<view class="uni-btn-v">
				<button type="primary" form-type="submit">登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				loginForm:{
					phoneEmail:'kingFore@qq.com',
					password:'kfyf_2019'
				}
			}
		},
		methods:{
			/**
			 * @param {Object} e
			 * 登录
			 */
			async formSubmit(e){
				const {phoneEmail,password}=e.detail.value
				await this.$store.dispatch('login',{phoneEmail,password}).then(res=>{	
					if(res.success){
						
						uni.showModal({
						    content:"" + res.msg,
							showCancel:false
						});
						setTimeout(()=>{
						  uni.reLaunch({url:'/pages/home/home'})
						},1000)
						
					}
				})
			},
			formReset(e){
				console.log(e,'e')
			}
		}
	}
</script>

<style scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login-form {
		display: inline-block;
		padding:20rpx;
		box-sizing: border-box;
	}
	.login-container .uni-form-item {
		
	}
	.login-container .uni-form-item .title  {
		margin-bottom: 20rpx;
	  /* margin-bottom: calc(750 * 100 / 20) upx; */
	}
</style>
